<template>
  <BaseLayout class="layout">
    <div class="bd">
      <div class="cell-btn" v-for="item in menus" :key="item.title" @click="handlerClickBtn(item)">{{ item.title }}</div>
    </div>
  </BaseLayout>
</template>
<script setup lang="ts">
import BaseLayout from '../layout/base.vue'
import { ref } from 'vue'
import { useRouter } from 'vue-router'
interface iMenus {
  title: string
  path: string
}
const router = useRouter()
const menus = ref<iMenus[]>([
  {
    title: '单词',
    path: '/word',
  },
  {
    title: '课文',
    path: '/article',
  },
  {
    title: '短句',
    path: '/sentences',
  },
])
const handlerClickBtn = (item: iMenus) => {
  router.push({ path: item.path })
}
/**
 * @description:
 * @param {*}
 * @return {*}
 * @author: xing
 * @Date: 2022-03-02 14:01:06
 * @LastEditTime: 2022-03-02 14:01:06
 * @LastEditors: xing
 * @FilePath: \vue3-ts-cms\src\views\home\Home.vue
 * @Description:
 * 
 * 
 * 
 * 
 */
</script>
<style lang="scss" scoped>
.layout-base {
  display: flex;
  height: 100%;
  flex-direction: column;
}
.layout {
  justify-content: center;
  align-items: center;
  .bd {
    width: 50%;
  }
  .cell-btn {
    font-size: 0.3508771929824561rem;
    line-height: 1;
    text-align: center;
    padding: 0.2rem;
    border: 1px solid #000;
    border-radius: 0.07017543859649122rem;
    & + .cell-btn {
      margin-top: 0.5rem;
    }
  }
}
</style>
